<template>
    <div>
        <div>

        </div>


        <div class="text1">
                        <el-alert
          :closable="false"
          title="请选择男方星座"
          type="success"
          effect="dark"
          center
          ></el-alert>

        </div>


        <div class="button1">
            <el-radio-group v-model="men" @change="agreeChange" fill="#00BFFF">
            <el-radio-button border label="白羊" size="medium" witdh=10rpx></el-radio-button>
            <el-radio-button border label="金牛" size="medium"></el-radio-button>
            <el-radio-button border label="双子" size="medium"></el-radio-button>
            <el-radio-button border label="巨蟹" size="medium"></el-radio-button>
            <el-radio-button border label="狮子" size="medium"></el-radio-button>
            <el-radio-button border label="处女" size="medium"></el-radio-button>
            <el-radio-button border label="天秤" size="medium"></el-radio-button>
            <el-radio-button border label="天蝎" size="medium"></el-radio-button>
            <el-radio-button border label="射手" size="medium"></el-radio-button>
            <el-radio-button border label="摩羯" size="medium"></el-radio-button>
            <el-radio-button border label="水瓶" size="medium"></el-radio-button>
            <el-radio-button border label="双鱼" size="medium"></el-radio-button>
            </el-radio-group>
        </div>
        <el-divider></el-divider>


        <div class="text22">
          <el-alert
          :closable="false"
          title="请选择女方星座"
          type="warning"
          effect="dark"
          center
          ></el-alert>
        </div>

         <div class="button2">
            <el-radio-group v-model="women  " @change="agreeChange" fill="#FF69B4">
            <el-radio-button border label="白羊" size="medium" witdh=10rpx></el-radio-button>
            <el-radio-button border label="金牛" size="medium"></el-radio-button>
            <el-radio-button border label="双子" size="medium"></el-radio-button>
            <el-radio-button border label="巨蟹" size="medium"></el-radio-button>
            <el-radio-button border label="狮子" size="medium"></el-radio-button>
            <el-radio-button border label="处女" size="medium"></el-radio-button>
            <el-radio-button border label="天秤" size="medium"></el-radio-button>
            <el-radio-button border label="天蝎" size="medium"></el-radio-button>
            <el-radio-button border label="射手" size="medium"></el-radio-button>
            <el-radio-button border label="摩羯" size="medium"></el-radio-button>
            <el-radio-button border label="水瓶" size="medium"></el-radio-button>
            <el-radio-button border label="双鱼" size="medium"></el-radio-button>
            </el-radio-group>
        </div>
        <el-divider></el-divider>

        <div class="button3">
            <el-button type="danger" @click="loadXz()">开始配对</el-button>
        </div>
        <el-divider></el-divider>

    
      <div class="pro">
      配对指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(data.zhishu)"></el-progress>
      两情相悦指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(data.xiangyue)" ></el-progress>
      天长地久指数:<el-progress :text-inside="true" :stroke-width="30" :percentage="parseFloat(data.tcdj)" ></el-progress>
      </div>
    

      <div class="a">
        <el-alert :closable="false" :title=data.jieguo type="error" effect="light" center></el-alert>
      </div>

      <div class="text">
        <el-alert :closable="false" title="恋爱建议" type="success" effect="dark" center>{{data.lianai}}</el-alert>
      </div>

     <div class="text2">
        <el-alert :closable="false" title="注意事项" type="success" effect="dark" center >{{data.zhuyi}}</el-alert>
      </div>


        


    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            men:"",
            women:"",
            data:{
                zhishu:0,
                bizhong:0,
                xiangyue:0,
                tcdj:0, 
                jieguo:"结果描述"
            },
        }
    },


    methods:{
           agreeChange(val){},
    
            loadXz(){
            // 定义变量，请求地址
            let url = "/eee/xzpd/query"
            // 请求参数
            let param = {
                men:this.men,
                women:this.women,
                key:"3019da9795efeb4b7056f91659d79f6d"
            }
            axios.get(url, { params: param }).then(resp => {
                this.data = resp.data.result
            })
            },
    
    }
    
}
</script>



<style scoped>
.button1,.button2,.button3{
    height: 40px;
    text-align: center;
}

.text1,.text22{
  text-align: center;
  margin: auto;
  width: 300px;
  height: 55px;
}

.pro{
    height: 170px;
    width: 600px;
    margin: auto;
}

.word{
    text-align: center;
}

.a{
    margin: auto;
    width: 180px;
    height: 50px;
}

.text{
  text-align: center;
  margin: auto;
  width: 750px;
  float: left;
  margin-left: 70px;
}

.text2{
  text-align: center;
  margin: auto;
  width: 750px;
  float: right;
  margin-right: 70px;
}



</style>